import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react'
import { getUsers } from '../api/github';
import { IUserItem, IUserList } from '../api/model/githubTypes';

export default function AxiosTable() {
    let [users, setUsers] = useState<IUserList>([])

    let [current, setCurrent] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(3)
    let [total, setTotal] = useState<number>(10)
    useEffect(() => {
        async function main() {
            let res = await getUsers('aa')
            console.log('res: ', res);
            console.log('user: ', res.items);// ts 报错，res身上没有 items属性
            // ts 是在编译阶段执行代码检查，数据是执行之后才有数据结构，需要让ts直到未来请求回来的数据结构，也就是需要先定义出响应数据的类型告诉ts
            setUsers(res.items);
            // 设置总条数
            setTotal(res.items.length);
        }
        main();
    }, [])
    const columns: ColumnsType<IUserItem> = [
        {
            title: 'id',
            dataIndex:'id'
        },
        {
            title:'login',
            dataIndex:'login'
        },
        {
            title:'头像',
            render(row:IUserItem){
                return <a href={row.html_url}><img width={100} src={row.avatar_url}/></a>
            }
        }
    ]
    
    return (
        <div>
            <h3>axios请求数据渲染table练习</h3>
            <Table
                rowKey={'id'}
                columns={columns}
                dataSource={users}
                pagination={{
                    current,
                    pageSize,
                    total,
                    onChange:(page:number, pageSize:number)=>{
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            />
        </div>
    )
}
